<template>
  <div class="sys-select">
    <el-select v-model="currValue" clearable v-bind="$attrs" v-on="$listeners">
      <el-option v-for="item in options" :key="item[valueField]" :value="item[valueField]" :label="item[labelField]"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'sys-select',
  cnName: '字典选择器',
  props: {
    value: [String, Number, Array],
    type: String,
    data: Array,
    module: {
      type: String,
      default: 'constant'
    },
    valueField: {
      type: String,
      default: 'value'
    },
    labelField: {
      type: String,
       default: 'label'
    }
  },
  data() {
    return {
      currValue: this.value,
      options: []
    }
  },
  methods: {
    async init() {
      const constant = this.$store.state[this.module]
      if(this.data) {
         this.options = this.data
        return
      }
      const list = constant[this.type]
      if(!list || list.length === 0) {
        await this.$store.dispatch('loadDictByType', {dictType: this.type})
      }
      this.options = constant[this.type]
    }
  },
  computed: {
  },
  watch: {
    value(val) {
      this.currValue = val
    },
    currValue() {
      this.$emit('input', this.currValue)
    },
    data() {
      this.options = this.data
    }
  },
  mounted() {
    this.init()
  }

}
</script>

<style lang="scss" scoped>
.sys-select {

  ::v-deep {
    .el-select {
      width: 100%;
    }
  }
}
</style>
